<template>
    <div class="content">
			<div class="content-1">
				<div class="form-1">
                    <form>
                        <label>MAC地址：</label>
                        <input type="text" id="inputL" value="" style="padding:10px 5px;width: 150px;border-radius:5px;border:1px solid #DBDBDB ;width: 180px;" placeholder="请输入MAC地址">
                    </form>
			    </div>
			    <div class="button-1">
                    <button id="claer"  style="padding:10px 20px;background: #F0F0F0;border-radius:5px;border:1px solid #DBDBDB ;border:1px solid #DBDBDB ;">清除</button>
                    <button id="serva" style="padding:10px 20px;background: #418BCA;border-radius:5px;border:1px solid #DBDBDB ;margin-left: 10px;border:1px solid #DBDBDB ;">保存</button>
			    </div>
			</div>
		</div>
</template>

<script>
    export default {
        components: {},
        data() {
            return {};
        },
        watch: {},
        methods: {},
        mounted() {
            let me = this;
            window.onload = function() {
                var btn1 = document.getElementById("serva");
                var btn2 = document.getElementById("claer");
                btn1.onclick = function() {
                    var inputL = document.getElementById("inputL").value;
                    localStorage.setItem("myCat", inputL);
                    var myCat = localStorage.getItem("myCat");

                    me.myCat = localStorage.getItem("myCat");
                    console.log(me.myCat, "我是MAC地址");
                    var parms = {
                        macAddress: me.myCat
                    };
                    console.log(parms);
                    $.ajax({
                        type: "POST",
                        url: me.cfg.api + "/ls/validateSktidAndMac",
                        data: parms
                    }).done(data => {
                        console.log(data);
                        if (data.code == 200) {
                            layer.alert(data.message);
                            localStorage.setItem("sktId", data.data.sktid);
                            console.log(data.data.sktid, "我是收款台id");
                            me.login = true;
                        } else {}
                    });
                    console.log(inputL);
                    console.log(inputL);
                };
                btn2.onclick = function() {
                    document.getElementById("inputL").value = "";
                };
                btn1.onmouseover = function() {
                    btn1.style =
                        "background: #CCCCCC;padding:10px 20px;border-radius:5px;color: #FFFFFF;margin-left: 10px;border:1px solid #DBDBDB ;";
                };
                btn1.onmouseout = function() {
                    btn1.style =
                        "background: #418BCA;padding:10px 20px;border-radius:5px;margin-left: 10px;border:1px solid #DBDBDB ;";
                };
                btn2.onmouseover = function() {
                    btn2.style =
                        "background: #CCCCCC;padding:10px 20px;border-radius:5px;color: #FFFFFF;color: #FFFFFF;border:1px solid #DBDBDB ;";
                };
                btn2.onmouseout = function() {
                    btn2.style =
                        "padding:10px 20px;border-radius:5px;border:1px solid #DBDBDB ;";
                };
            };
        }
    };
</script>
<style>
    button {
        padding: 5px;
    }
    
    .content-1 {
        width: 600px;
        height: 300px;
        border: 1px solid #ccc;
        left: 50%;
        top: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        background: #fff;
        border-radius: 3px 3px 3px 3px;
    }
    
    .form-1 {
        width: 300px;
        height: 150px;
        left: 50%;
        top: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
    }
    
    .button-1 {
        width: 300px;
        height: 150px;
        left: 85%;
        top: 90%;
        position: absolute;
        transform: translate(-50%, -50%);
    }
</style>